<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
        监听属性/侦听属性 ：
          Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。
          当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，但通常更好的做法是使用计算属性
        计算属性(computed) PK 监听属性(watch)：
           在特定条件下：计算属性 优于 监听属性
           监听属性监听的是同一个数据：data中的名字和watch中的名字是相同的  
        深度监听:deep 

        计算属性的变量不需要在data(){}中定义，监听属性的变量需要在data(){}中定义。
    -->
    <div id="app">
      <!-- 监听属性 -->
      <div>
        <input type="text" v-model="firstname">+
        <input type="text" v-model="lastname"> = {{fullname}}
      </div>
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            firstname:'',
            lastname:'',
            fullname:'', // 如果使用计算属性的话，将这行代码注释掉
        },
        // computed:{
        //     fullname(){
        //        return this.firstname + this.lastname
        //     },
        // },
        watch:{
            firstname(newVal,oldVal){
                console.log(newVal,oldVal)
                this.fullname = newVal + this.lastname
            },
            lastname(newVal,oldVal){
                console.log(newVal,oldVal)
                this.fullname = this.firstname + newVal 
            },
        }
    })
</script>
</html>